<template>
    <div class="mainprocess">
        <div class="itemcontent" v-for="(item,index) in processData">
            <div class="step">
                <template v-if="item.isReview">
                    <img src="../../../assets/third/stepselect.png" />
                    <div class="line" v-show="index<(processData.length-1)"></div>
                </template>
                <template v-if="!item.isReview">
                    <img src="../../../assets/third/stepnoselect.png" />
                    <div class="noline" v-show="index<(processData.length-1)"></div>
                </template>
            </div>
            <div class="reviewContent">
                <div class="comtentbox">
                    <div class="header">
                        <div class="title">{{item.institutions}}</div>
                        <div class="content" v-if="item.isReview">
                            <img src="../../../assets/third/reviewthrough.png" />审查通过
                            <span>审查人：</span>
                            <el-image style="width: 120px; height: 60px" :src="item.people"></el-image>
                            <span>{{item.date}}</span>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="opinionbox" v-if="item.isReview">
                        <div class="box">
                            <span>经办意见：</span>{{item.advice}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props:{
      processData:{},
    },
    data() {
        return {

        };
    },

    created() {
        // console.log(this.processData)
    },
    methods: {

    }
};
</script>

<style lang="scss" scoped>
    .mainprocess{
        padding:30px 40px;
        .itemcontent{
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            .step{
                width:24px;
                img{
                    width: 24px;
                    height: 24px;
                    display: block;
                }
                .line{
                    width:2px;
                    height:106px;
                    background: #FBA330;
                    margin: auto;
                }
                .noline{
                    width:2px;
                    height:106px;
                    background: #CCC9C6;
                    margin: auto;
                }
            }
            .reviewContent{
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                margin-left: 20px;
                .comtentbox{
                    width: 100%;
                    max-width: 980px;
                    height: 130px;
                    box-sizing: border-box;
                    padding-top: 2px;
                    .header{
                        .title{
                            float: left;
                            font-size:14px;
                            font-family:PingFang SC;
                            font-weight:500;
                            line-height:20px;
                            color: #4d4d4d;
                        }
                        .content{
                            float: right;
                            display: flex;
                            align-items: center;
                            font-size:14px;
                            font-family:PingFang SC;
                            font-weight:500;
                            line-height:20px;
                            color: #4d4d4d;
                            img{
                                width: 16px;
                                height: 16px;
                                margin-right: 8px;
                            }
                            span{
                                color: #a6a6a6;
                                margin-left: 30px;
                            }
                        }
                    }
                    .opinionbox{
                        // margin-top: 10px;
                        background: #f3f4f5;
                        padding: 16px 16px 20px;
                        border-radius:2px;
                        .box{
                            font-size:14px;
                            font-family:PingFang SC;
                            font-weight:500;
                            line-height:20px;
                            color: #4D4D4D;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            max-height: 60px;
                            overflow: hidden;
                            span{
                                color: #A6A6A6;
                            }
                        }

                    }
                }
            }
        }

    }
</style>
